<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const router = useRouter();
const route = useRoute();
// 定义输入框绑定变量
const input1 = ref("");

const goLogin = () => {
  router.push({
    path: "/login",
    query: {
      name: "login",
    },
  });
};

const goRegister = () => {
  router.push({
    path: "/login",
    query: {
      name: "register",
    },
  });
};
</script>

<template>
  <div class="home">
    <!-- 头部区域 -->
    <div class="header">
      <div class="flex justify-between items-center container mx-auto px-4">
        <div class="flex items-center gap-4">
          <!--  logo设置固定比例 -->
          <div class="logo-container">
            <img src="/imgs/logo.png" alt="网站logo" class="logo-img" />
          </div>

          <el-input
            v-model="input1"
            class="responsive-input"
            placeholder="搜索课程"
            :suffix-icon="Search"
            style="width: 300px" />
        </div>
        <div class="flex items-center gap-2">
          <el-link type="info" @click="goLogin()">登录</el-link>
          <span>/</span>
          <el-link type="info" @click="goRegister()">注册</el-link>
          <span>/</span>
          <el-link type="info" @click="navigateTo('/user')">个人中心</el-link>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <!--运行时 删除min-h-screen  -->
    <div class="content flex-1 max-h-fit h-min overflow-auto">
      <slot></slot>
    </div>

    <!-- 页脚区域 -->
    <div class="bg-[#333] mt-5">
      <div
        class="flex flex-wrap justify-between items-center container mx-auto text-gray-300 h-40 px-4">
        <div>
          <div>关于我们</div>
          <div>联系我们</div>
          <div>加入我们</div>
          <div>友情链接</div>
        </div>
        <div>
          <div>帮助中心</div>
          <div>意见反馈</div>
          <div>服务协议</div>
          <div>隐私政策</div>
        </div>
        <div>
          <div>院长电话:188-8888-8888</div>
          <div>院长邮箱:lubaobo@163.com</div>
        </div>
        <!-- 微信图片设置固定比例 -->
        <div class="wechat-container">
          <img
            src="/imgs/course/wechat.jpg"
            alt="微信公众号二维码"
            class="wechat-img" />
        </div>
      </div>
      <div
        class="bg-[#000] text-gray-300 h-10 flex items-center justify-center">
        课程版权均归振涛教育鸿蒙生态学院
      </div>
    </div>
    <div style="position: fixed; bottom: 250px; right: 10px;te">
      <div class="shadow-xl nav">AI智能体</div>
      <div class="shadow-xl nav">购物车</div>
      <div class="shadow-xl nav">反馈</div>
      <div class="shadow-xl nav">举报</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
}

// Logo固定比例 (3:1)
.logo-container {
  aspect-ratio: 3 / 1; /* 宽高比3:1 */
  width: 200px;
  overflow: hidden;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，完整显示 */
}

// 微信二维码固定比例 (1:1 正方形)
.wechat-container {
  aspect-ratio: 1 / 1; /* 正方形比例 */
  width: 80px;
  overflow: hidden;
}

.wechat-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填充容器，可能裁剪边缘 */
}

// 响应式调整
@media (max-width: 768px) {
  .logo-container {
    width: 150px;
  }

  .wechat-container {
    width: 60px;
  }
}
.nav {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 4rem;
  margin: 10px;
  cursor: pointer;
  font-size: 0.8rem;
}
</style>
